{{template "common/header.html" .}}
{{template "common/nav.html" .}}

<section class="main">
    <div class="container">
        <div class="card">
            <header class="card-header">
                <p class="card-header-title">绑定账号</p>
            </header>
            <div class="card-content">

                <div class="tabs is-centered">
                    <ul>
                        <li class="is-active" id="loginTab">
                            <a><span>绑定已有账号</span></a>
                        </li>
                        <li id="regTab">
                            <a><span>注册并绑定</span></a>
                        </li>
                    </ul>
                </div>

                {{if .ErrMsg}}
                    <strong><p class="help is-danger">{{.ErrMsg}}</p></strong>
                {{end}}

                <div id="loginPanel" style="display: block;">
                    <form method="post" action="{{baseUrl}}/user/github/bind">
                        <input name="githubId" type="hidden" value="{{.GithubId}}"/>
                        <input name="bindType" type="hidden" value="login"/>

                        <div class="field">
                            <label class="label"><span style="color:red;">*&nbsp;</span>用户名/邮箱</label>
                            <div class="control has-icons-left">
                                <input name="username" class="input is-success" type="text"
                                       placeholder="请输入用户名或邮箱" value="{{.Username}}">
                                <span class="icon is-small is-left"><i
                                            class="iconfont icon-username"></i></span>
                            </div>
                        </div>

                        <div class="field">
                            <label class="label">密码</label>
                            <div class="control has-icons-left">
                                <input name="password" class="input" type="password" placeholder="请输入密码"
                                       value="{{.Password}}">
                                <span class="icon is-small is-left"><i
                                            class="iconfont icon-password"></i></span>
                            </div>
                        </div>

                        <div class="field">
                            <div class="control">
                                <button type="submit" class="button is-success">绑定</button>
                            </div>
                        </div>
                    </form>

                </div>

                <div id="regPanel" style="display: none;">
                    <form method="post" action="{{baseUrl}}/user/github/bind">
                        <input name="githubId" type="hidden" value="{{.GithubId}}"/>
                        <input name="bindType" type="hidden" value="reg"/>

                        <div class="field">
                            <label class="label"><span style="color:red;">*&nbsp;</span>用户名</label>
                            <div class="control has-icons-left">
                                <input name="username" class="input is-success" type="text"
                                       placeholder="请输入用户名" value="{{.Username}}">
                                <span class="icon is-small is-left"><i
                                            class="iconfont icon-username"></i></span>
                            </div>
                        </div>

                        <div class="field">
                            <label class="label"><span style="color:red;">*&nbsp;</span>邮箱</label>
                            <div class="control has-icons-left">
                                <input name="email" class="input is-success" type="text"
                                       placeholder="请输入邮箱" value="{{.Email}}">
                                <span class="icon is-small is-left"><i
                                            class="iconfont icon-email"></i></span>
                            </div>
                        </div>

                        <div class="field">
                            <label class="label"><span style="color:red;">*&nbsp;</span>昵称</label>
                            <div class="control has-icons-left">
                                <input name="nickname" class="input is-success" type="text"
                                       placeholder="请输入昵称" value="{{.Nickname}}">
                                <span class="icon is-small is-left"><i
                                            class="iconfont icon-username"></i></span>
                            </div>
                        </div>

                        <div class="field">
                            <label class="label"><span style="color:red;">*&nbsp;</span>密码</label>
                            <div class="control has-icons-left">
                                <input name="password" class="input" type="password"
                                       placeholder="请输入密码" value="{{.Password}}">
                                <span class="icon is-small is-left"><i
                                            class="iconfont icon-password"></i></span>
                            </div>
                        </div>

                        <div class="field">
                            <label class="label"><span style="color:red;">*&nbsp;</span>确认密码</label>
                            <div class="control has-icons-left">
                                <input name="rePassword" class="input" type="password"
                                       placeholder="请再次输入密码" value="{{.RePassword}}">
                                <span class="icon is-small is-left"><i
                                            class="iconfont icon-password"></i></span>
                            </div>
                        </div>

                        <div class="field">
                            <div class="control">
                                <button type="submit" class="button is-success">绑定</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>

    </div>
</section>

<script type="text/javascript">
  $(document).ready(function () {
    var loginTab = $('#loginTab')
    var loginPanel = $('#loginPanel')
    var regTab = $('#regTab')
    var regPanel = $('#regPanel')

    loginTab.click(function () {
      switchToLoginBind()
    });
    regTab.click(function () {
      switchToRegBind()
    });


    function switchToLoginBind() {
      loginTab.addClass('is-active')
      loginPanel.show()

      regTab.removeClass('is-active')
      regPanel.hide()
    }

    function switchToRegBind() {
      regTab.addClass('is-active')
      regPanel.show()

      loginTab.removeClass('is-active')
      loginPanel.hide()
    }

      {{if eq .BindType "reg"}} switchToRegBind() {{end}}
  })
</script>

{{template "common/footer.html" .}}
